<template>
	<view class="mainHeader" :style="showTop">
		<view class="mainHeader_left" @click.stop="back()">
			<image src="@/static/add/return.png" class="back" v-if="props.haveBack" mode=""></image>
			<view class="title-box" v-else>
				<view class="title"></view>
			</view>
			<view class="mainHeader_left_Text">
				{{props.title}}
			</view>
		</view>
		<slot></slot>
	</view>
</template>
<script setup>
	import {
		ref,
		computed
	} from 'vue'
	const headerTop = ref(0)
	// #ifdef MP-WEIXIN
	headerTop.value = wx.getMenuButtonBoundingClientRect().bottom
	// #endif
	const showTop = computed(() => headerTop.value != 0 ? `padding-top:calc(${headerTop.value}px + 0.3em);height:auto;` :
		'')
	const props = defineProps({
		title: String,
		haveBack: {
			type: Boolean,
			default: false,
		},
		goto: {
			type: String,
			default: "none"
		}
	})
	const back = () => {
		let gotoTag = props.goto
		if (gotoTag == "none") {
			return
		}
		if (gotoTag == "back") {
			uni.navigateBack()
		} else if (gotoTag == "index" || gotoTag == "statistics") {
			uni.switchTab({
				url: `/pages/${props.goto}/${props.goto}`
			})
		} else {
			uni.redirectTo({
				url: `/subPages/${props.goto}/${props.goto}`
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.mainHeader {
		position: sticky;
		top: 0;
		z-index: 99;
		height: $mainHeaderHeight;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 0.2em 0.3em;
		border-radius: 0 0 0.3em 0.3em;
		background: $baseColor;
		color: $baseWhite;

		.mainHeader_left {
			display: flex;
			align-items: center;

			.back {
				width: $iconSize_base;
				height: $iconSize_base;
				margin-right: 0.3em;
			}

			.title-box {
				flex-shrink: 0;
				width: 0.8em;
				height: $iconSize_base;
				display: flex;
				justify-content: center;
				align-items: center;

				.title {
					width: 0.2em;
					display: inline-block;
					margin-right: 0.6em;
					height: 1em;
					margin-right: 0.1em;
					border-radius: 0.1em;
					background: $baseWhite;
				}
			}

			.mainHeader_left_Text {
				font-weight: bold;
			}
		}
	}
</style>